<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from '@/store'
import { ElMessage } from 'element-plus'
import Menu from '@/components/menu.vue'
const router = useRouter()
const store = useStore()
const emit = defineEmits(['del'])
const prop = defineProps({
    data: {
        type: Object,
        default: {
            name: '',
            token: ''
        }
    }
})

function removeToken() {
    store.removeToken(prop.data.token)
}

async function link() {
    if (prop.data.token == store.token) {
        ElMessage.info("请勿重复建立连接")
        return
    }
    if (store.link_state == 'false') {
        let data = await window.go.main.SetData.SettokenStr(prop.data.token)
        if (data == 'notoken') {
            ElMessage.info("token错误")
            return
        }
        store.token = prop.data.token
        store.link_start()
    } else if (store.link_state == 'true') {
        await link_fail()
        let data = await window.go.main.SetData.SettokenStr(prop.data.token)
        if (data == 'notoken') {
            ElMessage.info("token错误")
            return
        }
        store.token = prop.data.token
        store.link_start()
    } else {
        ElMessage.info("连接尚未建立成功，请稍候")
    }
}

function del() {
    emit('del', prop.data)
}
</script>

<template>
    <Menu @select="del">
        <template #item>
            <a href="" @click.prevent="link">
                <div class="item flex">
                    <div class="name">{{ data.name }}</div><div><i class="iconfont icon-shanchu deleteBtn" @click.stop="del"></i></div>
                </div>
            </a>
        </template>
    </Menu>
</template>

<style scoped lang="less">
@padding-wid: 10px;

a {
    text-decoration: none;
    color: black;
}

.item {
    background-color: rgb(215, 215, 215);
    font-size: 14px;
    text-align: center;
    padding: 5px @padding-wid 5px @padding-wid;
    display: flex;
    justify-content: space-between;
    margin: 5px;
    .deleteBtn{
        border: none;
        background-color: transparent;
        font-size: 16px;
        color:black;
        margin-left: 10px;
        cursor: pointer;
    }
    .deleteBtn:hover{
        color:red;
    }
}

.drop {
    transform: rotate(90deg);
}

.meua {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);

    .tokenname {
        padding: 5px 20px 5px 20px;
    }
}
</style>